<template>
	<view>
		<uv-list>
			<uv-list-item v-for="(item, index) in list" :key="index">
				<view class="item-box">
					<view class="title">
						{{item.noticeTitle}}
					</view>
					<view class="content">
						{{item.noticeText}}
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
				<uv-line></uv-line>
			</uv-list-item>
		</uv-list>
		<uv-load-more  @loadmore='loadmore' :status="loadStatus"></uv-load-more>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getNoticeListApi
	} from '../../api/index.js'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	const loadStatus = ref('loadmore')
	const pages = ref(0)
	const list = ref([])
	//列表查询的参数
	const parms = {
		currentPage: 1,
		pageSize: 10
	}
	//获取列表数据
	const getList = async() => {
		let res = await getNoticeListApi(parms)
		if (res && res.code == 200) {
			pages.value = res.data.pages;
			list.value = list.value.concat(res.data.records);
			console.log(list.value)
			if (parms.currentPage >= pages.value) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
		}
	}
	//加载更多
	const loadmore = () => {
		if (parms.currentPage >= pages.value) {
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		getList()
	}
	onReachBottom(() => {
		console.log('触底加载')
		if (parms.currentPage >= pages.value) {
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		getList()
	})
	onLoad(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFF;
	}

	.item-box {
		padding: 20rpx 30rpx;

		.title {
			color: #606266;
			font-size: 32rpx;
		}

		.content {
			color: #999;
			font-size: 28rpx;
			padding: 10rpx 0rpx;
		}

		.date {
			color: #999;
			font-size: 28rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>
